<template>
	<view class="warp">
		<view class="class_box">
			<view class="hot_list">
				<view @click="tocourseinfo(item)" class="hot_item" v-for="(item,index) in typeCourseList" :key="index">
					<view class="hot_left">
						<image class="hot_left_image"  :src="item.courseImage"  mode="aspectFill"></image>
					</view>
					<view class="hot_right">
						<view class="r_top_classname">{{item.courseName}}</view>
						<view class="r_lite_classname">{{item.courseIntro}}</view>
						<view class="r_bottom flex_row_between_center">
							<view class="r_b_left">{{item.chargeOrNot==0 ? '免费':'收费'}}</view>
							<view class="r_b_right flex_row_start_center">
								<view>{{item.coursePeople}}</view>
								<view>人已学习</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		    <loadingState
		      v-if="
		       loadingState == 'first_loading' ||
		        typeCourseList.length > 0
		      "
		      :state="loadingState"
		    />
		</view>
		<!-- <view class="" style="height: 200rpx;"></view> -->
	</view>
</template>

<script>
	import loadingState from "@/components/loading-state.vue";
	export default {
		components: {
			loadingState
		},
		data() {
			return {
				type:'',
				typeCourseList:[],
				current:1,
				loadingState:'first_loading',
			};
		},
		onLoad(e) {
			 console.log('this.$Route.query',this.$Route.query);
			setTimeout(() => {
				if(this.$Route.query.type==1){
					uni.setNavigationBarTitle({
							title: "热门课程"
						})
						
				}else if(this.$Route.query.type==2){
					uni.setNavigationBarTitle({
							title: "新手好课"
						})
				}
			}, 0)
			this.type=this.$Route.query
			this.getTypeList(this.$Route.query.type)
				
		},
		onReachBottom(){
			console.log('到底了。。。。');
			this.getExpertList(this.type)
		},
		methods:{
			// 详情
			tocourseinfo(){
				// uni.navigateTo({
				// 	url:"/extra/courseinfo/courseinfo"
				// })
				// this.$Router.push({
				// 	path: '/extra/courseinfo/courseinfo',
				// 	query: {
				// 		courseId: index
				// 	}
				// })
				this.$Router.push({
					path: '/extra/courseinfo/courseinfo',
					query: {
						courseId: item.courseId
					}
				})
			},
			getTypeList(type){
				
				if (this.loadingState === 'loading') {
					//防止重复加载
					return;
				}
				
				if (this.loadingState == 'no_more_data') {
					//已经没有数据，无需再请求
					return;
				}
				let param = {};
				param.url = 'v3/study/front/course/index/type';
				param.method = 'GET'
				param.data = {}
				param.data.type = type
				param.data.pageSize = 10;
				param.data.current = this.current;
				this.$request(param).then(res=>{
					// console.log(res);
					if(res.state==200){
						this.typeCourseList=this.typeCourseList.concat(res.data.typeCourseList)
						// let hasMore = this.$checkPaginationHasMore({
						// 	current:this.current,
						// 	pageSize:10,
						// 	total:res.data.pagination.total
						// }); 
						// if (hasMore) {
						// 	this.current++;
						// 	this.loadingState = 'allow_loading_more';
						// } else {
							this.loadingState = 'no_more_data';
						// }
					}else{
						this.$modal.msg(res.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.warp{
	  
	  padding-bottom: 30rpx;
	}
	.hot_list{
		padding: 0 32rpx;
	}
	.hot_item{
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			margin-bottom: 10rpx;
			background-color: #fff;
			.hot_left{
				width: 258rpx;
				margin-right: 24rpx;
				position: relative;
				// background-image: url('https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/012.png');
				 // background-size: cover;
				 .hot_left_image{
				 	width: 258rpx;
				 	height: 168rpx;
				 	border-radius: 15rpx;
				 }
				.hot_left_bottom{
					width: 100%;
					background-color: #b33129;
					font-size: 18rpx;
					color: #fff;
					border-radius: 10rpx;
					padding: 10rpx 15rpx;
					position: absolute;
					bottom: 0;
					height: 65rpx;
				}
			}
			.hot_right{
				width: 408rpx;
				padding: 20rpx 0;
				
				.r_top_classname{
					font-size: 28rpx;
					font-weight: 600;
				}
				.r_lite_classname{
					font-size: 24rpx;
					color: #666666;
				}
				.r_bottom{
					margin-top: 42rpx;
				
					.r_b_left{
						color: #F12B10;
						font-size: 24rpx;
					}
					.r_b_right{
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}


</style>
